<html layout:decorate="~{alarm/alarm_layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<body>
<div layout:fragment="content_alarm">
    <div class="parameter_main">

        <div style="width: 29%;float: left;margin-left: 5px">

            <div>
                <input type="text" class="search-data-child" name="name" placeholder="搜索设备名称" style="margin-left: 20px;margin-top: 10px">
            </div>

            <div class="panel panel-primary threshold-div">
                <div id="tree" style="height: 600px;overflow-y :scroll;">

                </div>
            </div>
        </div>

        <div style="width: 69%;float: right;margin-right: 5px">
            <div>
                <input type="text" class="search-data-child" name="name" placeholder="搜索阈值名称" style="margin-left: 100px;margin-top: 10px">
            </div>

            <div class="panel panel-primary threshold-div">
                <div style="height: 600px;">
                    <table id="dataTable" data-url="/alarm/threshold_data" data-page-list=[]  data-striped="true" data-pagination="true" data-page-size="15" data-cache="false">

                    </table>
                </div>
            </div>
        </div>
    </div>
    <style>
        .threshold-div{
            margin-top: 10px;
        }
        .bs-bars{
            position: relative;
             margin-top: 0px!important;
             margin-bottom: 0px!important;
            line-height: 34px;
        }
    </style>
    <script>

        var tree = [{
            text: "大拇指大厦",
            nodes: [{
                    text: "1#变流器(PCS)"
                },{
                    text: "1#电池包(BMS)"
                },{
                    text: "2#变流器(PCS)"
                },{
                    text: "2#电池包(BMS)"
                },{
                    text: "3#变流器(PCS)"
                },{
                    text: "3#电池包(BMS)"
            }]
        }];

        $('#tree').treeview({
            data: tree,         // 数据源
            showCheckbox: true,   //是否显示复选框
            highlightSelected: true,    //是否高亮选中
            emptyIcon: '',    //没有子节点的节点图标
            multiSelect: true   //多选
        });
        $('#tree').treeview('collapseAll', { silent: true });

        //table字段
        var dataFormat = [{
            title: '序号',
            align: 'center',
            formatter: function (value, row, index) {
                return index + 1;
            }
        },{
            field: 'name',
            align: 'center',
            title: '阈值名称'
        },{
            field: 'value',
            align: 'center',
            title: '设定值'
        },{
            field: 'updateTime',
            align: 'center',
            title: '最近一次修改时间',
            formatter : function(value,row,index){
                return formatTimeStrap(value);
            }
        },{
            field: 'diagnose',
            align: 'center',
            title: '诊断建议'
        },{
            title: '操作',
            align: 'center',
            formatter: operateFormatter
        }];

        function operateFormatter(value, row, index) {
            return ['<button class="btn btn-xs btn-info" onclick="updateThreshold(' + row.id + ')">修改</button>' +
                    '<button class="btn btn-xs btn-danger" onclick="updateStatus(1, ' + row.id + ')">恢复初始化</button>'].join('');
        }

        function updateThreshold(id) {

            var url = "/alarm/threshold_edit";

            if (id) {
                url += "?id=" + id;
            }

            $("#modal").modal({
                remote : url
            });
        }

        //初始化table
        window.onload = function () {
            getTable(dataFormat, "dataTable");
        };
    </script>
</div>
</body>
</html>